<template>
  <div class="app-container">
    <el-row>
      <el-col :span="12">
        <div
          ref="chartCount"
          style="width: 300px; height: 300px; background-color: #ffffff"
        ></div>
      </el-col>
      <el-col :span="12">
        <div
          ref="chartMoney"
          style="width: 300px; height: 300px; background-color: #ffffff"
        ></div>
        </el-col
      >
    </el-row>

    <el-form
      :model="param"
      ref="queryForm"
      :inline="true"
      label-width="68px"
    >
      <el-form-item label="当天批次:" prop="preId" label-width="80px">
        <el-select
        @change="handleQuery"
          v-model="param.preId"
          placeholder="请选择当天批次"
          clearable
          size="mini"
        >
          <el-option
            v-for="item in preIdList"
            :key="item"
            :label="item"
            :value="item"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="前一天批次:" prop="aftId" label-width="90px">
        <el-select
          v-model="param.aftId"
          placeholder="请选择前一天批次"
          clearable
          size="mini"
          @change="handleQuery"
        >
          <el-option
            v-for="item in aftIdList"
            :key="item"
            :label="item"
            :value="item"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="商品代码" prop="code">
        <el-input
          v-model="param.code"
          placeholder="请输入商品代码"
          clearable
          size="mini"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="排序" prop="orderFiled">
        <el-select
          v-model="param.orderFiled"
          placeholder="请选择排序字段"
          clearable
          size="mini"
        >
        <el-option
            v-for="item in orderFiledList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="报表类型" prop="priceType">
        <el-select
          v-model="param.priceType"
          placeholder="请选择报表类型"
          clearable
          size="mini"
        >
        <el-option
            v-for="item in priceTypeList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item class="form_button">
        <el-button ref='order' 
          type="primary"
          size="mini"
          @click="orderClick"
          >{{orderText}}</el-button>
        
      </el-form-item>
      <el-form-item class="form_button">
        <el-button
          type="primary"
          icon="el-icon-search"
          size="mini"
          @click="handleQuery"
          >搜索</el-button
        >
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
          >重置</el-button
        >
      </el-form-item>


      <el-form-item class="lableText" label="销售总件数:" prop="aftId" label-width="90px">
        {{ count }}
      </el-form-item>
      <el-form-item   class="lableText"  label="销售总金额:" prop="aftId" label-width="90px">
        {{ priceSum }}
      </el-form-item>

      <el-form-item   class="lableText"  label="销售总利润:" prop="aftId" label-width="90px">
        {{ sum }}
      </el-form-item>
    </el-form>

    <el-table v-loading="loading" :data="tableList">
      <el-table-column label="分类" align="center" prop="bigType" />
      <el-table-column label="类别" align="center" prop="type" />
      <el-table-column label="商品代码" width="90" align="left" prop="code" />
      <el-table-column
        label="商品条码"
        width="130"
        align="left"
        prop="barCode"
      />
      <el-table-column
        width="150"
        label="商品名称和规格"
        align="left"
        prop="nameSpecification"
      >
        <template slot-scope="scope">
          <MyTooltip :text="scope.row.nameSpecification"></MyTooltip>
        </template>
      </el-table-column>
      <el-table-column label="销售数量" align="left" prop="count" />
      <el-table-column label="销售金额" align="left" prop="profitSum" />
      <el-table-column label="商品单位" align="left" prop="unit" />

      <el-table-column label="批发价" align="left" prop="wholesalePrice" />
      <el-table-column
        label="建议零售价"
        width="100"
        align="left"
        prop="msrpPrice"
      />
      <el-table-column
        label="门店零售价"
        width="100"
        align="left"
        prop="retailPrive"
      />
    </el-table>
  </div>
</template>
  
  <script>
import { getids, inventoryContrast } from "@/api/meiyijia/salesReport";

import "./index.scss";
export default {
  name: "Inventory",
  data() {
    return {
      priceTypeList:[

      {"label":"销量","value":1},
        {"label":"进货","value":2},
        {"label":"无销售","value":0}
      ],
      orderText:"正序",
      // 排序字段列表
      orderFiledList:[
      {"label":"销量","value":"count"},
        {"label":"销售金额","value":"retailPriveSum"},
        {"label":"销售利润","value":"profitSum"}

      ],
      preIdList: [],
      aftIdList: [],
      queryParams: {
        preId: "",
        aftId: "",
      },
      sum: "",
      count: "",
      priceSum:"",
      typeList: [],
      tableList: [],
      loading: true,
      param :{
          preId:"",
          aftId: "",
          type: "",
          code:"",
          order:"asc",
          orderFiled:"",
          bigType:"",
          type:"",
          priceType:1,
        }
    };
  },
  created() {
    this.getIds();
  },
  methods: {

    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    orderClick(){
      if(this.param.order == 'desc'){
        this.param.order = 'asc'
        this.orderText = "正序"
      }else if(this.param.order == 'asc'){
        this.param.order = 'desc'
        this.orderText = "倒序"
      }
      this.handleQuery();
    },
    handleQuery() {
      this.inventoryContrast(this.param);
    },
    getIds() {
      this.loading = true;
      getids().then((response) => {
        this.preIdList = response.data;
        this.aftIdList = response.data;
        this.queryParams.preId = response.data[0];
        this.queryParams.aftId = response.data[1];

        this.param.preId = response.data[0]
        this.param.aftId = response.data[1]

        this.inventoryContrast( this.param);
      });
    },

    inventoryContrast(param) {
      inventoryContrast(param).then((response) => {
        console.log(response);
        this.sum = response.data.sum;
        this.count = response.data.count;
        this.priceSum = response.data.priceSum;
        this.tableList = response.data.list;
        this.typeList = response.data.typeList;

        var listCount = [];
        var listMoney = [];
        for (let i = 0, len = response.data.typeList.length; i < len; i++) {
          var item = response.data.typeList[i];
          var data = {
            value: item.count,
            name: item.type,
          };
          var datas = {
            value: item.money,
            name: item.type,
          };
          listMoney.push(datas);
          listCount.push(data);
        }
        listCount.sort(function (a, b) {
          return b.value - a.value; // 降序，升序则反之
        });
        listMoney.sort(function (a, b) {
          return b.value - a.value; // 降序，升序则反之
        });
        this.chartCountInit(listCount, listMoney);
        this.loading = false;
      });
    },
    chartCountInit(listCount, listMoney) {
      this.myChart = this.$echarts.init(this.$refs.chartCount);
      this.myChart.setOption({
        title: {
          text: "销售件数",
          left: "center",
        },
        tooltip: {
          trigger: "item",
        },

        series: [
          {
            type: "pie",
            radius: "50%",
            data: listCount,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      });
      this.chartMoney = this.$echarts.init(this.$refs.chartMoney);
      this.chartMoney.setOption({
        title: {
          text: "销售金额",
          left: "center",
        },
        tooltip: {
          trigger: "item",
        },

        series: [
          {
            type: "pie",
            radius: "50%",
            data: listMoney,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      });
    },
  },
};
</script>
  <style scoped lang="scss">
</style>